<template>
  <div id="allBox">
    <!--头部-->
    <div class="topBox">
      <div class="tb">
        <span class="el-icon-s-order"></span>
        <span>我的订单</span>
      </div>
    </div>
    <!--主体部分-->
    <div class="wbodyBox">
      <div class="wbB" v-if="!orderList">
        <div></div>
        <div>
          <h2>您的订单还是空的!</h2>
          <p>快去购物吧!</p>
        </div>
      </div>
      <div class="listData" v-if="orderList">
        <ul v-for="(item, index) in orderList" :key="index">
          <li>
            <div>订单编号 {{ item.order_id }}</div>
            <div>订单时间 {{ item.order_time | time }}</div>
          </li>
          <li>
            <div></div>
            <div>商品名称</div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
          </li>
          <li>
            <div>
              <img
                :src="'http://106.15.179.105:3000/' + item.product_picture"
                alt=""
              />
            </div>
            <div>{{ item.product_name }}</div>
            <div>{{ item.product_price }}</div>
            <div>{{ item.product_num }}</div>
            <div>{{ item.product_price * item.product_num }}</div>
          </li>
          <li>
            <div>
              共<span> {{ item.product_num }} </span>件商品
            </div>
            <div>
              <span>合计：</span>
              <span>{{ item.product_price * item.product_num }} 元</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <login-module ref="loginRef"></login-module>

    <!-- products: [,…]
    user_id: 3019 -->
  </div>
</template>

<script>
import orderAPI from "../../api/order";
export default {
  components: {},
  name: "",
  data() {
    return {
      orderList: [
        {
          id: 3812,
          order_id: 30191618836339170,
          order_time: 1618836339170,
          product_id: 20,
          product_name: "小米9 ARE U OK保护壳",
          product_num: 2,
          product_picture: "public/imgs/accessory/protectingShell-Mi-9.png",
          product_price: 39,
          user_id: 3019,
        },
        {
          id: 3799,
          order_id: 30191618829212210,
          order_time: 1618829212206,
          product_id: 11,
          product_name: "小米全面屏电视E65A",
          product_num: 1,
          product_picture: "public/imgs/appliance/MiTv-E65A.png",
          product_price: 2799,
          user_id: 3019,
        },
      ],
    };
  },
  created() {
  },
  activated() {
    this.getAddList();
  },
  methods: {
    async getAddList() {
      let { data: res } = await orderAPI.getList({
        user_id: this.$store.state.user_id,
      });
      console.log(res);
    },
  },

  //刚进入组件的时候调用
  // beforeRouteEnter: (to, from, next) => {
  //   next((vm) => {
  //     console.log(vm);
  //     if (
  //       to.path == "/" ||
  //       to.path == "/particulars" ||
  //       to.path == "/allShop"
  //     ) {
  //       next();
  //     } else if (vm.$store.state.userName == "") {
  //       alert("还没有登录，请先登录！");

  //       vm.$refs.loginRef.$data.dialogFlag = true;
  //       next(false);
  //     } else {
  //       next();
  //     }
  //   });
  // },
};
</script>

<style lang="scss" scoped>
#allBox {
  min-height: 540px;
  background-color: #f5f5f5;
  padding-bottom: 30px;
  .topBox {
    width: 100%;
    height: 64px;
    border-bottom: 2px solid orangered;
    background-color: white;
    .tb {
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px;
    }
    span:nth-child(1) {
      color: orangered;
      margin-right: 10px;
    }
  }
  .wbodyBox {
    padding-top: 14px;
    width: 1225px;
    min-height: 450px;
    margin: auto;
    .wbB {
      width: 100%;
      align-items: center;
      display: flex;
      div:nth-child(1) {
        width: 50%;
        height: 450px;
        background: url(../../../public/cart-empty.png) no-repeat 214px 0;
      }
      div:nth-child(2) {
        flex: 1;
        height: 450px;
        margin: auto 0;
        h2 {
          margin: 70px 0 15px;
          font-size: 36px;
          color: #b0b0b0;
        }
        p {
          margin: 0 0 20px;
          font-size: 20px;
          color: #b0b0b0;
        }
      }
    }
    .listData {
      ul {
        width: 1225px;
        min-height: 262px;
        list-style: none;
        margin-top: 40px;
        background-color: white;
        li:nth-child(1) {
          height: 60px;
          line-height: 60px;
          padding: 0 26px;
          color: #424242;
          border-bottom: 1px solid #ff6700;
          display: flex;
          justify-content: space-between;
          div:nth-child(1) {
            color: #ff6700;
          }
        }
        li:nth-child(2) {
          width: 1225px;
          height: 85px;
          display: flex;
          justify-content: space-between;
          text-align: center;
          align-items: center;
          border-bottom: 1px solid #424242;
          div:nth-child(1) {
            width: 200px;
            height: 85px;
            width: 120px;
            padding-left: 80px;
          }
          div:nth-child(2) {
            width: 380px;
          }
          div:nth-child(3) {
            width: 160px;
            padding-right: 18px;
            text-align: center;
          }
          div:nth-child(4) {
            width: 190px;
            text-align: center;
          }
          div:nth-child(5) {
            width: 160px;
            padding-right: 81px;
            text-align: right;
          }
        }
        li:nth-child(3) {
          width: 1225px;
          height: 85px;
          display: flex;
          justify-content: space-between;
          text-align: center;
          align-items: center;
          border-bottom: 1px solid #ff6700;
          div:nth-child(1) {
            width: 200px;
            height: 85px;
            width: 120px;
            padding-left: 80px;
            img {
              width: 80px;
              height: 80px;
            }
          }
          div:nth-child(2) {
            width: 380px;
          }
          div:nth-child(3) {
            width: 160px;
            padding-right: 18px;
            text-align: center;
          }
          div:nth-child(4) {
            width: 190px;
            text-align: center;
          }
          div:nth-child(5) {
            width: 160px;
            padding-right: 81px;
            text-align: right;
          }
        }
        li:nth-child(4) {
          width: 1225px;
          height: 85px;
          padding: 0 26px;
          display: flex;
          justify-content: space-between;
          text-align: center;
          align-items: center;
          div:nth-child(1) {
            color: #757575;
            font-size: 16px;
            span {
              color: #ff6700;
            }
          }
          div:nth-child(2) {
            color: #ff6700;
            font-size: 14px;
            span:nth-child(1) {
              font-size: 14px;
            }
            span:nth-child(2) {
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
